<template>
  <div class="app-container">
    <el-collapse>
      <el-collapse-item>
        <div slot="title">
          &nbsp;&nbsp;&nbsp;{{$t('sms.click_to_filter')}}&nbsp;&nbsp;&nbsp;<i class="icon iconfont icon-filter" style="font-size: 10px"></i>
        </div>
        <el-form :inline="true" :model="q" class="demo-form-inline query" label-position="left" >
          <el-form-item label="ID">
            <el-input v-model="q.id" placeholder="ID" prefix-icon="el-icon-edit"></el-input>
          </el-form-item>
          <el-form-item :label="$t('sms.smstime')">
            <div>
              <el-date-picker v-model="q.sms_time.$gte" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :placeholder="$t('sms.select_date_time')"></el-date-picker>
              -<el-date-picker v-model="q.sms_time.$lt" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :placeholder="$t('sms.select_date_time')"></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item :label="$t('sms.our_arrival_time')">
            <div>
              <el-date-picker v-model="q.created_at.$gte" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :placeholder="$t('sms.select_date_time')"></el-date-picker>
              -<el-date-picker v-model="q.created_at.$lt" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :placeholder="$t('sms.select_date_time')"></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item :label="$t('sms.merchant')">
            <el-select v-model="q.mch_id" :placeholder="$t('sms.mch_id')">
              <el-option :label="$t('sms.all')" :value=null></el-option>
              <el-option v-for="mch of MchList" :key="mch.id" :label="mch.name" :value="mch.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('sms.matching_status')">
            <el-select v-model.number="q.status" :placeholder="$t('sms.status')">
              <el-option :label="$t('sms.all')" :value=null></el-option>
              <el-option v-for="(statu, index) of MatchStatusArray" :key="index" :label="statu" :value="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="q.bankcard_name" :placeholder="$t('sms.bankcard_name')" prefix-icon="el-icon-edit"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="q.bank" :placeholder="$t('sms.bank')" prefix-icon="el-icon-edit"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="q.amount" :placeholder="$t('sms.amount')" prefix-icon="el-icon-edit"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="q.order_id" :placeholder="$t('sms.match_order_id')" prefix-icon="el-icon-edit"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="q.balance" :placeholder="$t('sms.balance')" prefix-icon="el-icon-edit"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="content.$like" :placeholder="$t('sms.txt_msg_content')" prefix-icon="el-icon-edit"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query">{{$t('sms.search')}}</el-button>
            <el-button type="danger" @click="reload">{{$t('sms.reset')}}</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>
    <el-row>
      <el-col >
        {{$t('sms.total_revenue')}}: <span style="color: #f00;line-height: 80px" v-if="listData.income">{{listData.income.toFixed(2)}}</span>{{$t('sms.rmb')}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        {{$t('sms.total_expenses')}}: <span style="color: #f00;line-height: 80px" v-if="listData.spend">{{listData.spend.toFixed(2)}}</span>{{$t('sms.rmb')}}
      </el-col>
    </el-row>
    <el-table :data="listData.list" v-loading.body="listLoading" @sort-change="sortlist" element-loading-text="Loading" stripe border fit highlight-current-row>
      <el-table-column prop="id" label='ID' sortable width="80"></el-table-column>
      <el-table-column prop="mch_id" :label="$t('sms.mch_id')" sortable width="100"></el-table-column>
      <el-table-column prop="bankcard_name" :label="$t('sms.bankcard_name')" sortable width="120"></el-table-column>
      <el-table-column prop="bank" :label="$t('sms.bank')" sortable width="100"></el-table-column>
      <el-table-column prop="amount" :label="$t('sms.amount')" sortable width="100"></el-table-column>
      <el-table-column prop="balance" :label="$t('sms.balance')" width="100"></el-table-column>
      <!--<el-table-column prop="remarks" label='备注' sortable width="120"></el-table-column>-->
      <el-table-column prop="content" :label="$t('sms.txt_msg_content')" sortable width="380"></el-table-column>
      <el-table-column prop="status" :label="$t('sms.status')" width="100">
        <template slot-scope="scope">{{MatchStatusArray[scope.row.status]}}</template>
      </el-table-column>
      <el-table-column prop="order_id" :label="$t('sms.order_id')" width="180"></el-table-column>
      <el-table-column prop="sms_time" :label="$t('sms.smstime')" sortable width="180"></el-table-column>
      <el-table-column prop="created_at" :label="$t('sms.created_at')" sortable width="180"></el-table-column>
      <el-table-column prop="updated_at" :label="$t('sms.updated_at')" sortable width="180"></el-table-column>
      <el-table-column :label="$t('sms.operation')" width="80" fixed="right">
        <template slot-scope="scope">
          <div>
            <el-button v-if="scope.row.status === 1 && $store.state.user.user_perms.includes('402')" @click="detail(scope.row)" type="text" size="small" >[{{$t('sms.order_details')}}]</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                      :current-page="q.$page" :page-sizes="$store.state.app.pageSizeArr"
                      :page-size="q.$size"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="listData.total_count">
      </el-pagination>
    </div>
    <show-detail v-if="showDetailInfo" :showDetailInfo.sync ="showDetailInfo" :order_id="order_id"></show-detail>
    <show-match v-if="showMatchInfo" :showMatchInfo.sync ="showMatchInfo" :id="id" :amount="amount"></show-match>
  </div>
</template>

<script>
  import showDetail from './showDetail'
  import showMatch from './matchOrder'
  import { getSmsList, getMchList } from '@/api/merchant'
  import {queryFilter} from '@/utils/patch'
  export default {
    components: { showDetail, showMatch },
    data() {
      return {
        listData: {},
        content: {},
        showDetailInfo: false,
        showMatchInfo: false,
        q: {sms_time: {}, created_at: {},$size: 30, $page: 1},
        MchList: [],
        MatchStatusArray: [this.$t('sms.unmatched'), this.$t('sms.matched')],
        listLoading: true,
        order_id: null,
        id: null,
        amount: null
      }
    },
    created() {
      this.getList()
      this.getMchList()
    },
    deactivated(){
      this.listLoading = false
    },
    methods: {
      query(){
        this.getList()
      },
      reload() {
        this.content = {}
        this.q = {sms_time: {}, created_at: {},$size: 30, $page: 1}
        this.getList()
      },
      sortlist(sort){
        this.q.$orderby = sort.prop
        this.getList()
      },
      handleSizeChange (val) {
        this.q.$size = val
        this.getList()
      },
      handleCurrentChange (val) {
        this.q.$page = val
        this.getList()
      },
      detail(row){
        this.order_id = row.order_id
        this.showDetailInfo = true
      },
      match(row){
        this.id = row.id
        this.amount = row.amount
        this.showMatchInfo = true
      },
      getList() {
        if(this.content.$like){
          this.q.content = this.content
        }
        let params = Object.assign({
          $orderby: '-id'
        }, this.q)

        let queryObj = queryFilter(params)
        this.listLoading = true
        getSmsList(queryObj).then(res => {
          if (res.status === 0) {
            this.listLoading = false
            this.listData = res.data
          }
        })
      },
      getMchList(){
        getMchList({$size: -1}).then(res => {
          if (res.status === 0) {
            this.MchList = res.data.list
          }
        })
      }
    },
    watch: {
      showDetailInfo() {
        if(!this.showDetailInfo){
          this.getList()
        }
      },
      showMatchInfo() {
        if(!this.showMatchInfo){
          this.getList()
        }
      }
    }
  }
  
  export const enSms = {
  user_id: 'User ID',
  notcallback: 'Not callback',
  callback_failed: 'Callback failed',
  callback_success: 'Callback success',
  unmatched: 'Unmatched',
  matched: 'matched',
  order_details: 'Order details',
  order_id: 'Order ID',
  total_expenses: 'Total Withdrawal',
  total_revenue: 'Total Deposit',
  txt_msg_content: 'Text message content',
  match_order_id: 'Match order ID',
  matching_status: 'Matching status',
  our_arrival_time: 'Our arrival time',
  select_date_time: 'Select date and time',
  click_to_filter: 'Click to filter',
  smstime: 'SMS Cat Time',
  amount: 'Amount',
  add: 'Add a bankcard',
  merchant: 'Company',
  pls_choose: 'Please Choose',
  all: 'All',
  bankcard_name: 'Bankcard name',
  bankcard_no: 'Bankcard number',
  phone: 'Phone',
  cardholder_name: "Cardholder's name",
  bank: 'Bank',
  status: 'Status',
  acct_bal: 'Account Balance',
  balance: 'Balance',
  more: 'More than',
  less: 'Less than',
  search: 'Search',
  reset: 'Reset',
  id: 'ID',
  name: 'Name',
  mch_id: 'Company ID',
  acct_no: 'Account No.',
  acct_holder: 'Account Holder',
  subbranch: 'Sub branch',
  desc: 'Description',
  updated_at: 'UpdatedAt',
  created_at: 'CreatedAt',
  operation: 'Operating',
  edit: 'Edit',
  delete: 'Delete',
  qrcode: 'Generate qrcode',
  stats: 'Show Statistics',
  online: 'Online',
  offline: 'Offline',
  cancle_input: 'Cancel Input',
  cancel: 'Cancel',
  confirm: 'Confirm',
  qrcode_notif: 'QR code amount, you can also specify the amount',
  success_delete: 'Successfully deleted',
  delete_verify: 'Are you sure you want to delete the item with the ID of',
  edit_bankcard_info: 'Edit bankcard information',
  business_info: 'Business Information',
  weight: 'Weights',
  recharge_limit: 'Recharge Limit',
  login_acct_name: 'Login account name',
  password: 'Password',
  payment_password: 'Payment password',
  u_password: 'Ukey password',
  u_expiration: 'Ukey expiration date',
  pls_choose_time: 'Please choose time',
  save: 'Save',
  success_add: 'Added successfully',
  success_edit: 'Successfully modified',
  total_amount: 'Total Amount',
  collection_amount: 'Collection Amount',
  payment_amount: 'Payment Amount',
  auto_close_count: 'Auto Close Count',
  processing_count: 'Processing Count',
  invalid_count: 'Invalid Count',
  close: 'Close',
  rmb: 'RMB'
  }

  export const zhSms = {
  user_id: '用户ID',
  notcallback: '未回调',
  callback_failed: '回调失败',
  callback_success: '回调成功',
  unmatched: '未匹配',
  matched: '已匹配',
  order_details: '订单详情',
  order_id: '匹配订单号',
  total_expenses: '总支出',
  total_revenue: '总收入',
  txt_msg_content: '短信内容',
  match_order_id: '匹配订单ID',
  matching_status: '匹配状态',
  our_arrival_time: '我方到账时间',
  select_date_time: '选择日期时间',
  click_to_filter: '点击筛选',
  smstime: '短信猫时间',
  amount: '金额',
  add: '新增银行卡',
  merchant: '商户',
  pls_choose: '请选择',
  all: '所有',
  bankcard_name: '银行卡名称',
  bankcard_no: '银行卡号',
  phone: '电话',
  cardholder_name: '持卡人姓名',
  bank: '银行',
  status: '状态',
  acct_bal: '账户金额',
  balance: '余额',
  more: '大于',
  less: '小于',
  search: '查询',
  reset: '重置',
  id: 'ID',
  name: '名称',
  mch_id: '商户号',
  acct_no: '银行卡号',
  acct_holder: '持卡人姓名',
  subbranch: '支行信息',
  desc: '描述',
  updated_at: '更新时间',
  created_at: '创建时间',
  operation: '操作',
  edit: '编辑',
  delete: '删除',
  qrcode: '生成收款码',
  stats: '统计',
  online: '开启',
  offline: '关闭',
  cancle_input: '取消输入',
  cancel: '取消',
  confirm: '确认',
  qrcode_notif: '二维码金额，也可以不指定金额',
  success_delete: '删除成功',
  delete_verify: '确认删除ID为',
  edit_bankcard_info: '修改银行卡信息',
  business_info: '商户信息',
  weight: '权重',
  recharge_limit: '告警限额',
  login_acct_name: '登陆账户名',
  password: '登陆密码',
  payment_password: '支付密码',
  u_password: 'U盾密码',
  u_expiration: 'U盾到期时间',
  pls_choose_time: '请选择时间',
  save: '确定',
  success_add: '新增成功',
  success_edit: '修改成功',
  total_amount: '总金额',
  collection_amount: '收款金额',
  payment_amount: '支付金额',
  auto_close_count: '自动关闭计数',
  processing_count: '处理计数',
  invalid_count: '计数无效',
  close: '关',
  rmb: '元'
  }
</script>
